<template>
  <a-spin :spinning="confirmLoading">
    <a-descriptions bordered>
      <a-descriptions-item label="开票单位" >{{formData.businessId_dictText}}</a-descriptions-item>
      <a-descriptions-item label="企业名称" >{{formData.businessName}}</a-descriptions-item>
      <a-descriptions-item label="纳税人识别号" >{{formData.businessTax}}</a-descriptions-item>
      <a-descriptions-item label="企业地址" :span="2">{{formData.businessAddress}}</a-descriptions-item>
      <a-descriptions-item label="企业电话">{{formData.businessPhone}}</a-descriptions-item>
      <a-descriptions-item label="开户行" :span="2">{{formData.businessBankName}}</a-descriptions-item>
      <a-descriptions-item label="银行账号" >{{formData.businessBankAccount}}</a-descriptions-item>
      <a-descriptions-item label="开票类目" >{{formData.categoryText}}</a-descriptions-item>
      <a-descriptions-item label="开票类型" >
        <a-badge v-if="formData.type==1" color="green" :text="formData.type_dictText" />
        <a-badge v-if="formData.type==2" color="red" :text="formData.type_dictText" />
      </a-descriptions-item>
      <a-descriptions-item label="开票金额" ><span style="font-size: 18px;color: red;">￥ {{parseFloat(formData.amount).toFixed(2)}}</span></a-descriptions-item>
      <a-descriptions-item label="备注信息" >{{formData.remark}}</a-descriptions-item>
      <a-descriptions-item label="收件类型" :span="2">
        <a-badge v-if="formData.receivedType==1" color="green" :text="formData.receivedType_dictText" />
        <span v-if="formData.receivedType==1 && formData.electronicInvoice">
          <a-button style="margin-left: 30px;" :ghost="true" type="primary" preIcon="ant-design:search-outlined"
                    size="small" @click="viewFile(formData.electronicInvoice)">预览</a-button>
          <a-button style="margin-left: 15px;" :ghost="true" type="primary" preIcon="ant-design:download-outlined"
                    size="small" @click="downloadFile(formData.electronicInvoice)">下载</a-button>
        </span>
        <a-badge v-if="formData.receivedType==2" color="red" :text="formData.receivedType_dictText" />
        <span v-if="formData.receivedType==2 && formData.billImg" style="margin-left: 20px;">
          <PreviewGroup>
            <template v-for="(img, index) in formData.billImg.split(',')" :key="index">
              <Image :width="80" :height="80" style="padding-left: 10px;" :src="useGlobSetting().filePreviewUrl + img"/>
            </template>
          </PreviewGroup>
        </span>
      </a-descriptions-item>
      <a-descriptions-item label="收件信息" :span="3" v-if="formData.receivedType==2">
        {{formData.receivedAddress}} &nbsp;&nbsp;&nbsp;&nbsp;{{formData.receivedName}} &nbsp;&nbsp;{{formData.receivedPhone}}
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>

<script lang="ts" setup>
import {defineExpose, defineProps, nextTick, reactive, ref} from 'vue';
import {useMessage} from '/@/hooks/web/useMessage';
import {downloadFile, viewFile} from "/@/utils/common/renderUtils";
import {Form, Image} from 'ant-design-vue';
import {useGlobSetting} from "/@/hooks/setting";

const props = defineProps({
    formData: { type: Object, default: ()=>{} },
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    companyId: '',   
    businessId: '',   
    orderNo: '',   
    businessName: '',   
    businessPhone: '',   
    businessTax: '',   
    businessAddress: '',   
    businessBankName: '',   
    businessBankAccount: '',   
    category: '',
    categoryId: '',
    categoryText: '',
    amount: undefined,
    type: 1,
    remark: '',   
    receivedType: 1,
    receivedName: '',
    receivedPhone: '',
    receivedAddress: '',
    checkTime: '',   
    rejectReason: '',   
    electronicInvoice: '',   
    billImg: '',   
    finishTime: '',   
    status: undefined,
  });
  const { createMessage } = useMessage();
  const confirmLoading = ref<boolean>(false);
  const { resetFields } = useForm(formData, { immediate: true });

  /**
   * 打卡弹框
   */
  function edit(record) {
    nextTick(() => {
      resetFields();
      //赋值
      Object.assign(formData, record);
    });
  }

  defineExpose({
    edit,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    overflow-y: auto;
    padding: 24px 24px 24px 24px;
  }
</style>
